<template>
  <Modal :draggable="!$config.mask" :mask="$config.mask" :mask-closable="!$config.mask"
         :value="value"
         @on-ok="save"
         @on-visible-change="visibleChange">
    <p slot="header">
      <template v-if="modalData.update">
        {{ title }}{{ modalData.data.extra.displayName }}
      </template>
      <template v-else>
        在 {{ modalData.data ? modalData.data.extra.displayName : '根' }} 下{{ title }}
      </template>
    </p>
    <Form ref="form" :model="ou" :rules="rules" label-position="top">
      <FormItem label="单位名称" prop="displayName">
        <Input v-model="ou.displayName" :maxlength="128" placeholder="" ref="displayName"></Input>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button icon="md-close" @click="cancel">取消</Button>
      <Button icon="md-checkmark" type="primary" @click="save">确定</Button>
    </div>
  </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import OU from '@/store/entities/administration/organization-unit/o-u';
import Ajax from '@/lib/ajax';
import _ from 'lodash';

@Component({
  components: {},
})
export default class OUModal extends AbpBase {
  name: string = 'OUModal';

  @Prop({type: Boolean, default: false}) value: boolean;
  @Prop({type: Object}) modalData: any;

  ou: OU = new OU();
  rules = {
    displayName: [
      {
        required: true,
        message: '单位名称是必须的',
        trigger: 'blur',
      },
      {
        validator: async (rule, value, callback) => {
          const response = await Ajax.post('/api/services/app/OrganizationUnit/ValidateOrganizationUnit', {
            value: value,
            id: this.modalData.update ? (this.modalData.data ? this.modalData.data.extra.id : 0) : 0,
            parentId: this.modalData.update ? (this.modalData.data ? this.modalData.data.extra.parentId : null) : (this.modalData.data ? this.modalData.data.extra.id : null),
          });
          if (response.data.result.status) {
            callback();
          } else {
            callback(new Error(response.data.result.message));
          }
        },
        trigger: 'blur',
      },
    ],
  };

  get title() {
    if (this.modalData.update) {
      return '更新单位：';
    } else {
      return '新建单位';
    }
  }

  async save() {
    (this.$refs.form as any).validate(async (valid: boolean) => {
      if (valid) {
        if (this.modalData.update) {
          await this.$store.dispatch({
            type: 'ou/updateOrganizationUnit',
            data: {
              id: this.modalData.data.extra.id,
              displayName: this.ou.displayName,
            },
          });
          this.$Message.success({
            background: true,
            content: '单位 ' + this.ou.displayName + ' 已更新成功',
            duration: this.$config.duration,
          });
        } else {
          this.ou.parentId = this.modalData.data ? this.modalData.data.extra.id : null;
          await this.$store.dispatch({
            type: 'ou/createOrganizationUnit',
            data: this.ou,
          });
          this.$Message.success({
            background: true,
            content: '单位 ' + this.ou.displayName + ' 已新建成功',
            duration: this.$config.duration,
          });

        }

        this.$emit('save-success', this.$store.state.ou.currentOU);
        this.$emit('input', false);
      }
    });
  }

  cancel() {

    this.$emit('input', false);
  }

  reset() {
    (this.$refs.form as any).resetFields();
    this.ou = new OU();
  }

  visibleChange(value: boolean) {
    if (!value) {
      this.reset();
      this.$emit('input', value);
    } else {
      if (this.modalData.update) {
        this.ou = _.cloneDeep(this.modalData.data.extra);
      }
    }
  }

}
</script>

<style lang="less" scoped>

</style>
